<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例演示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/base.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.2.7.6.js"></script>
    <script src="/static/ueditor/ueditor.config.js"></script>
    <script src="/static/ueditor/ueditor.all.min.js"></script>
</head>
<body>

<form class="layui-form" action="" lay-filter="formFilter" style="margin-top: 50px;">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" required autocomplete="off" placeholder="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" lay-verify="description" class="layui-textarea" required name="description"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">关键词</label>
        <div class="layui-input-block">
            <textarea placeholder="多个关键词请用英文逗号 , 隔开" class="layui-textarea" name="keywords"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">封面图</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" onclick="upload('thumbnail')">
                <i class="layui-icon"></i>
                <p>点击上传图片</p>
                <div class="layui-hide" id="uploadView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
            </div>
            <input type="hidden" name="thumbnail" value="" autocomplete="off" placeholder=""  class="layui-input">
            <div class="layui-hide" id="uploadView">
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea placeholder="" id="content" class="layui-textarea" name="content"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" name="sort" lay-verify="sort" required autocomplete="off" placeholder="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="lay-form">立即提交</button>
        </div>
    </div>
</form>

<script>
    // 百度富文本编辑器
    var detail = UE.getEditor('content');
    detail.ready(function () {
        //设置编辑器的内容
        // ue.setContent('hello');
        //获取html内容，返回: <p>hello</p>
        content = detail.getContent();
        //获取纯文本内容，返回: hello
        var txt = detail.getContentTxt();
        detail.setHeight(300);
        $('#edui1_iframeholder').css('max-height', '500px')
    });
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var layer = parent.layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //自定义验证规则
        form.verify({
            role_name: function(value){
                if(value.length < 2){
                    return '标题至少得5个字符啊';
                }
            }
        });

        //提交事件
        form.on('submit(lay-form)', function(data){
            console.log(JSON.stringify(data.field));
            $.ajax({
                url:'/admin/article/addArticle',
                data:data.field,
                async:false,
                type:'post',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        layer.msg('操作成功',{
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        },function () {
                            layer.closeAll()
                            parent.layui.table.reload('dataTable')
                        })

                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },fail:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
        });


    });
    function upload(from=''){
        layui.layer.open({
            title: '选择图片',
            type: 2,
            shadeClose:true,
            area: ['90%','90%'],
            content: '/admin/public/image_list.html?from='+from
        })
    }
    //layer弹出的子页面传值到当前页面
    function GetChildValue(data,from=''){
        if(from == 'video'){
            $("input[name=video]").attr("value",data[0].id)
        }else if(from == 'thumbnail'){
            console.log(from,data)

            $("input[name=thumbnail]").attr("value",data[0].url)
            layui.$('#uploadView').removeClass('layui-hide').find('img').attr('src', data[0].url);
        }
    }
</script>

</body>
</html>